<template>
  <div>
    <div id="pie1" style="width: 100%; height: 500px" />
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      counts: {},
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.getRequest("/count/all").then((resp) => {
        this.counts = resp;
        const chartpie = document.getElementById("pie1");
        const myChartpie = echarts.init(chartpie);
        const option = {
          title: {
            text: "2021年人员总数分析",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            x: "left",
            y: "50",
            bottom: "10%",
            orient: "horizontal",
          },
          series: [
            {
              name: "人员人数",
              type: "pie",
              right: "20px",
              radius: ["38%", "60%"],
              center: ["40%", "60%"],
              data: [
                { value: resp.Teacher, name: "teacher" },
                { value: resp.Student, name: "student" },
              ],
              clockwise: false,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChartpie.setOption(option);
      });
    },
  },
};
</script>

<style></style>
